<template>
	<view @click="onclick">
		<!-- #ifndef MP-WEIXIN -->
		<svg class="icon" aria-hidden="true" :style="{'width':size+'rpx','height':size+'rpx','fill':color}">
			<use :xlink:href="'#icon-'+name"></use>
		</svg>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view :class="['iconfont',`icon-${name}`]" :style="{'fontSize':size+'rpx','color':color}"></view>

		<!-- #endif -->

	</view>
</template>

<script>
	// #ifndef MP-WEIXIN
	import './iconfont.js'
	// #endif



	export default {
		name: "wxn-icon",
		props: {
			name: {
				type: String,
				default: '',
				required: true
			},
			size: {
				type: [String, Number],
				default: 52,
			},
			color: {
				type: String,
				default: '#666666',
			}
		},
		methods: {
			onclick() {
				this.$emit('click')
			}
		}

	}
</script>

<style lang="scss">
	@import './iconfont.css'
</style>